<!-- Dom模板 -->
<template>
  <div class="sales">
    <!-- Dom内容 -->

       <!-- 选择日期范围 -->
          <div class="calendar">
              <p class="iconfont icon-riqi"></p>
              <el-date-picker
              v-model="timeValue"
              type="daterange"
              range-separator="至"
              start-placeholder="From"
              end-placeholder="To">
            </el-date-picker>
          </div>





          <!-- 最终利润 -->
          <div class="profit">
              <div class="title">
                最终利润
              </div>
              <div class="end">
                <h1>2489.23</h1>
                <p>最终利润</p>
              </div>
              <div class="profit_each">
                  <div>
                        <h3>2489.23</h3>
                        <p>最终利润</p>
                  </div>
                  <div>
                        <h3>2489.23</h3>
                        <p>最终利润</p>
                  </div>
                  <div>
                        <h3>2489.23</h3>
                        <p>最终利润</p>
                  </div>
                  <div>
                        <h3>2489.23</h3>
                        <p>最终利润</p>
                  </div>
                  <div>
                        <h3>2489.23</h3>
                        <p>最终利润</p>
                  </div>
                  <div>
                        <h3>2489.23</h3>
                        <p>最终利润</p>
                  </div>
              </div>
          </div>



           <!-- 支付方式 -->
          <div class="pay">
              <div class="title">支付方式</div>
              <div class="end">
                <h1>5556.23</h1>
                <p>合计收款</p>
              </div>
              <div class="profit_each">
                  <div>
                        <h3>2489.23</h3>
                        <p>最终利润</p>
                  </div>
                  <div>
                        <h3>2489.23</h3>
                        <p>最终利润</p>
                  </div>
                  <div>
                        <h3>2489.23</h3>
                        <p>最终利润</p>
                  </div>
                  <div>
                        <h3>2489.23</h3>
                        <p>最终利润</p>
                  </div>
                  <div>
                        <h3>2489.23</h3>
                        <p>最终利润</p>
                  </div>
                  <div>
                        <h3>2489.23</h3>
                        <p>最终利润</p>
                  </div>
                  <div>
                        <h3>2489.23</h3>
                        <p>最终利润</p>
                  </div>
                  <div>
                        <h3>2489.23</h3>
                        <p>最终利润</p>
                  </div>
                  <div>
                        <h3>2489.23</h3>
                        <p>最终利润</p>
                  </div>
                  <div>
                        <h3>2489.23</h3>
                        <p>最终利润</p>
                  </div>
              </div>
              <div class="proportion">
                    <div v-for="(item,index) in proportion" :key="index" :style="{height:'100%',width:item.num,background:item.background}">
                    </div>
              </div>
          </div>




            <!-- 配送方式 -->
          <div class="send_box">
                <div class="send_each">
                    <div class="top">
                        <h2>送货上门</h2>
                        <p class="iconfont icon-yunshuzhongwuliu-xianxing"  :style="{color:'blue'}"></p>
                    </div>
                    <div class="bottom">
                        <div>
                            <h3 :style="{color:'blue'}">10</h3>
                            <p>单</p>
                        </div>
                        <div>
                            <h3 :style="{color:'blue'}">561.550</h3>
                            <p>元</p>
                        </div>
                    </div>
                </div>
                <div class="send_each">
                    <div class="top">
                        <h2>到店自取</h2>
                        <p class="iconfont icon-daodian" :style="{color:'orange'}"></p>
                    </div>
                    <div class="bottom">
                        <div>
                            <h3 :style="{color:'orange'}">180</h3>
                            <p>单</p>
                        </div>
                        <div>
                            <h3 :style="{color:'orange'}">561.550</h3>
                            <p>元</p>
                        </div>
                    </div>
                </div>
          </div>



        <!-- 销售类别 -->
        <div class="table">
          <div class="title">
            <h3>销售类别</h3>
            <div class="print" @click="print"><p class="iconfont icon-excel"></p><p :style="{fontSize:'14px'}">导出到Excel</p></div>
          </div>

          <el-table
            :data="rightsDate"
            border
            :header-cell-style="{background:'#e8e7e7'}"
            style="width: 100%">
                <el-table-column
                        v-for="(info,index) in rightHeader" :key="index"
                        :property="info.key"
                        :label="info.label"
                        min-width="100"
                        align='center'
                    >
                        <!-- 渲染对应表格里面的内容 -->
                        <!-- <template slot-scope="scope">
                                {{scope.row[scope.column.property]}}  
                        </template> -->
                </el-table-column>
                

                <!-- <el-table-column
                    prop="kinds"
                    label="类别"
                    width="180">
                </el-table-column>
                 <el-table-column
                    prop="num"
                    label="类别"
                    width="180">
                </el-table-column>
                 <el-table-column
                    prop="sales"
                    label="类别"
                    width="180">
                </el-table-column>
                 <el-table-column
                    prop="profitMargin"
                    label="类别"
                    width="180">
                </el-table-column>
                 <el-table-column
                    prop="kinds"
                    label="类别"
                    width="180">
                </el-table-column> -->
            </el-table>
        </div>




  </div>
</template>

<script>
// import a from './a'; // 引入组件
import { export2Excel } from '../../../utils/print/index'

export default {
  name: '',
  data() {
    return {
        timeValue: '',
        rightHeader: [
        {
          label: '类别',
          key: 'kinds'
        },
        {
          label: '数量',
          key: 'num'
        },
        {
          label: '销售额',
          key: 'sales'
        },
        {
          label: '利润率',
          key: 'profitMargin'
        },
        {
          label: '利润',
          key: 'profit'
        }
        ],
        rightsDate:[{
            kinds:'副食品',
                num:100,
                sales:999,
                profitMargin:56,
                profit:666
            }, {
            kinds:'副食品',
                num:100,
                sales:999,
                profitMargin:56,
                profit:666
            }, {
            kinds:'副食品',
                num:100,
                sales:999,
                profitMargin:56,
                profit:666
            }, {
            kinds:'副食品',
                num:100,
                sales:999,
                profitMargin:56,
                profit:666
            },
            {
            kinds:'副食品',
                num:100,
                sales:999,
                profitMargin:56,
                profit:666
            }
        ],
        proportion:[
        {
          num:'10%',
          background:'red'
        },
        {
          num:'10%',
          background:'skyblue'
        },
        {
          num:'5%',
          background:'pink'
        },
        {
          num:'40%',
          background:'red'
        },
        {
          num:'15%',
          background:'aqua'
        },
        {
          num:'20%',
          background:'green'
        }
        ],
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
      
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
      
  },
  // Vue方法定义
  methods: {
      print() {
        export2Excel(this.rightHeader,this.rightsDate,'订单列表')
      },
     
  }
}
</script>

<style lang='less'>
/* @import url(''); 引入css类 */
    @import url('./index.less');
</style>